<template>
  <div class="block_item bottom_padding_1389">
    <div class="scale_topic bottom_line">
      <div class="scale_name">{{ ratingScaleName }}</div>
      <div class="scale_num">
        共{{
          taskQuestionList.length >= 1
            ? taskQuestionList.length
            : questionList.length
        }}题
      </div>
    </div>

    <div class="scale_subject">
      <div
        class="subject_item"
        v-for="(r, i) in taskQuestionList.length >= 1
          ? taskQuestionList
          : questionList"
        :key="i"
      >
        <div class="subject_text">{{ `${r.num}.${r.name}` }}</div>
        <div class="subject_answer">
          <div
            class="answer_item"
            v-for="(sr, si) in r.RatingScaleQuestionAnswer"
            :key="si"
          >
            <img
              class="options_select"
              :src="selectedStatus(sr.select == 1)"
              alt=""
            />
            <div class="answer_text">{{ sr.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryTaskAnswer } from "@/api/evaluation/task";
export default {
  props: {
    questionList: {
      type: Array,
      default: () => [],
    },
    ratingScaleName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      factorName: null,
      taskQuestionList: [],
    };
  },
  created() {},
  computed: {
    selectedStatus() {
      return (flag) => {
        if (flag) {
          return require("@/assets/images/common/radio11.png");
        } else {
          return require("@/assets/images/common/radio1.png");
        }
      };
    },
  },
  methods: {
    async getInfo(id) {
      let res = await queryTaskAnswer({ id });
      if (res.code === 200) {
        this.taskQuestionList = res.data;
      }
    },
  },
};
</script>

<style scoped>
.block_item {
  width: 100%;
  height: fit-content;
  background: #ffffff;
  border-radius: 6.94px;
  box-sizing: border-box;
}
.bottom_line {
  position: relative;
}
.bottom_line::before {
  display: block;
  width: 100%;
  height: 0.35px;
  background: #dddddd;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
}
.scale_topic {
  padding: 22.7425px 20.84px 15.4525px 20.84px;
  box-sizing: border-box;
  text-align: center;
}
.scale_name {
  font-size: 18.75px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #333333;
  line-height: 28.125px;
  margin-bottom: 6.945px;
}
.scale_num {
  line-height: 21.875px;
  font-size: 12.5px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: rgba(51, 51, 51, 0.5);
}
.subject_item {
  width: calc(100% - 10.42px * 2);
  margin: 0 auto;
  padding: 14.93px 4.86px;
  box-sizing: border-box;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #333333;
}
.subject_text {
  line-height: 26.39px;
  font-size: 15.97px;
  margin-bottom: 10.72px;
  word-break: break-all;
  text-align: justify;
}
.subject_answer {
  display: grid;
  gap: 11.11px;
}
.answer_item {
  line-height: 26.39px;
  font-size: 15.97px;
  display: grid;
  grid-template-columns: 14.93px auto;
  gap: 14.14px;
}
.is_check .answer_check {
  border-color: #00aeff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.is_check .answer_check::after {
  display: block;
  content: "";
  border-radius: 50%;
  box-sizing: border-box;
  width: 8.33px;
  height: 8.33px;
  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 10%),
    #0aa7f4;
}
.options_select {
  width: 14px;
  height: 14px;
  margin-top: 5px;
}
.answer_text {
  word-break: break-all;
  text-align: justify;
}
.is_check .answer_text {
  color: #00aeff;
  font-size: 14.58px;
}
</style>
